<template>
  <div class="medical-accompany">
    <header class="header">
      <div class="back-button" @click="goBack">
        <span>&lt;</span>
      </div>
      <h1>就医陪诊</h1>
      <div class="right-icons">
        <span class="icon">♡</span>
        <span class="icon">⋯</span>
      </div>
    </header>

    <div class="service-banner">
      <!-- <img src="https://via.placeholder.com/750x200?text=就医陪诊服务" alt="就医陪诊" class="banner-image" /> -->
      <div class="service-info">
        <h2>专业就医陪诊服务</h2>
        <div class="rating">
          <span class="stars">★★★★★</span>
          <span class="rating-count">4.9 (1800+评价)</span>
        </div>
        <div class="tags">
          <span class="tag">专业护士陪诊</span>
          <span class="tag">医院流程熟悉</span>
          <span class="tag">全程贴心服务</span>
        </div>
      </div>
    </div>

    <div class="service-tabs">
      <div class="tab" :class="{ active: activeTab === 'detail' }" @click="activeTab = 'detail'">服务详情</div>
      <div class="tab" :class="{ active: activeTab === 'review' }" @click="activeTab = 'review'">用户评价</div>
      <div class="tab" :class="{ active: activeTab === 'qa' }" @click="activeTab = 'qa'">常见问题</div>
    </div>

    <div class="tab-content" v-if="activeTab === 'detail'">
      <div class="service-items">
        <div class="service-item" v-for="(item, index) in serviceItems" :key="index" @click="selectServiceItem(item)">
          <div class="item-header">
            <div class="item-title">{{ item.title }}</div>
            <div class="item-price">{{ item.price }}</div>
          </div>
          <div class="item-desc">{{ item.description }}</div>
          <div class="item-features">
            <div class="feature" v-for="(feature, i) in item.features" :key="i">
              <span class="feature-icon">✓</span>
              <span class="feature-text">{{ feature }}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="service-process">
        <h3>服务流程</h3>
        <div class="process-steps">
          <div class="step">
            <div class="step-icon">1</div>
            <div class="step-text">预约下单</div>
          </div>
          <div class="step-arrow">→</div>
          <div class="step">
            <div class="step-icon">2</div>
            <div class="step-text">护士联系</div>
          </div>
          <div class="step-arrow">→</div>
          <div class="step">
            <div class="step-icon">3</div>
            <div class="step-text">陪诊服务</div>
          </div>
          <div class="step-arrow">→</div>
          <div class="step">
            <div class="step-icon">4</div>
            <div class="step-text">评价反馈</div>
          </div>
        </div>
      </div>

      <div class="service-description">
        <h3>服务说明</h3>
        <div class="description-content">
          <p>就医陪诊服务由经验丰富的专业护士提供，熟悉医院流程和各科室诊疗特点，为您提供全程就医陪伴和专业指导，包括以下内容：</p>
          
          <h4>预约挂号</h4>
          <p>根据您的就医需求，协助您选择合适的医院、科室和医生，并提前进行预约挂号，节省您的等待时间。</p>
          
          <h4>陪同就诊</h4>
          <p>护士全程陪同您进行就诊，包括排队、分诊、问诊、检查等环节，提供专业的医疗咨询和解释，帮助您与医生有效沟通。</p>
          
          <h4>检查陪同</h4>
          <p>陪同您完成各项医疗检查，解释检查目的和注意事项，协助您理解检查结果，并记录重要信息。</p>
          
          <h4>取药指导</h4>
          <p>协助您在医院药房或医保定点药店取药，详细讲解药品使用方法、剂量和注意事项，确保您正确用药。</p>
          
          <h4>就医总结</h4>
          <p>就诊结束后，为您整理医嘱、用药方案和后续就医建议，形成简明的就医报告，便于您后续参考。</p>
        </div>
      </div>

      <div class="service-notice">
        <h3>服务须知</h3>
        <div class="notice-item">
          <h4>服务时长</h4>
          <p>基础服务4小时，可根据实际就诊情况延长（每超出1小时加收相应费用）</p>
        </div>
        <div class="notice-item">
          <h4>服务范围</h4>
          <p>全国30+城市三甲医院及大型综合医院，下单前请先确认服务医院是否在范围内</p>
        </div>
        <div class="notice-item">
          <h4>准备事项</h4>
          <p>1. 身份证、医保卡、就诊卡等证件</p>
          <p>2. 既往病历和检查资料</p>
          <p>3. 当日就诊所需费用</p>
        </div>
        <div class="notice-item">
          <h4>注意事项</h4>
          <p>1. 请提前至少24小时预约服务</p>
          <p>2. 护士不提供抬举、搬运等体力服务</p>
          <p>3. 护士不代替医生做出医疗决策</p>
        </div>
      </div>
    </div>

    <div class="tab-content" v-else-if="activeTab === 'review'">
      <div class="reviews">
        <div class="review-summary">
          <div class="rating-large">4.9</div>
          <div class="stars-large">★★★★★</div>
          <div class="review-count">共1800+评价</div>
        </div>
        
        <div class="review-tags">
          <div class="review-tag active">全部</div>
          <div class="review-tag">好评(1750+)</div>
          <div class="review-tag">有图(400+)</div>
          <div class="review-tag">专业(800+)</div>
          <div class="review-tag">耐心(650+)</div>
        </div>
        
        <div class="review-list">
          <div class="review-item" v-for="(review, index) in reviews" :key="index">
            <div class="reviewer-info">
              <img :src="review.avatar" alt="用户头像" class="reviewer-avatar" />
              <div class="reviewer-name">{{ review.name }}</div>
              <div class="review-date">{{ review.date }}</div>
            </div>
            <div class="review-stars">★★★★★</div>
            <div class="review-content">{{ review.content }}</div>
            <div class="review-images" v-if="review.images && review.images.length">
              <img v-for="(image, i) in review.images" :key="i" :src="image" alt="评价图片" class="review-image" />
            </div>
            <div class="nurse-reply" v-if="review.reply">
              <div class="reply-title">护士回复：</div>
              <div class="reply-content">{{ review.reply }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="tab-content" v-else-if="activeTab === 'qa'">
      <div class="qa-list">
        <div class="qa-item" v-for="(qa, index) in qaList" :key="index" @click="toggleQA(index)">
          <div class="question">
            <span class="q-icon">Q</span>
            <span class="q-text">{{ qa.question }}</span>
            <span class="q-arrow" :class="{ 'arrow-down': qa.open }">▼</span>
          </div>
          <div class="answer" v-if="qa.open">
            <span class="a-icon">A</span>
            <span class="a-text">{{ qa.answer }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="booking-bar">
      <div class="price-info">
        <div class="price">¥199</div>
        <div class="price-desc">起/次</div>
      </div>
      <button class="book-button" @click="makeAppointment()">立即预约</button>
    </div>
    
    <!-- 底部占位，防止内容被底部固定栏遮挡 -->
    <div class="bottom-placeholder"></div>
  </div>
</template>

<script setup>
import { ref, defineEmits } from 'vue';

const emit = defineEmits(['go-back', 'show-appointment']);

const activeTab = ref('detail');

const serviceItems = ref([
  {
    title: '门诊陪诊服务',
    price: '¥199/次',
    description: '专业护士全程陪同就医，协助挂号、检查、取药，解读医嘱，提供专业建议',
    features: ['专业护士陪同', '挂号及检查协助', '医嘱解读', '就医全程记录']
  },
  {
    title: '住院陪护服务',
    price: '¥399/天',
    description: '专业护士提供住院期间的专业陪护，包括生活照料、病情观察、与医生沟通等',
    features: ['24小时专业陪护', '病情观察记录', '生活照料', '医患沟通协助']
  },
  {
    title: '远程医疗协助',
    price: '¥99/次',
    description: '协助患者进行远程问诊，包括设备调试、问诊预约、问题整理、医嘱记录等',
    features: ['远程设备调试', '问诊预约协助', '问题整理提炼', '医嘱记录与解读']
  },
  {
    title: '慢病管理陪诊',
    price: '¥299/月',
    description: '为慢性病患者提供定期陪诊服务，包括复诊提醒、用药指导、检查结果解读等',
    features: ['定期复诊陪同', '用药指导', '检查结果解读', '健康状况追踪']
  }
]);

const reviews = ref([
  {
    name: '王**',
    avatar: '',
    date: '2023-05-15',
    content: '父亲年纪大了，自己又不在身边，预约了陪诊服务非常放心。护士很专业，不仅帮助父亲顺利就医，还详细记录了医生的建议和用药指导，让我们远在外地的子女也能了解父亲的健康状况。',
    images: [],
    reply: '感谢您的信任，我们会继续提供优质服务！'
  },
  {
    name: '李**',
    avatar: '',
    date: '2023-05-02',
    content: '自己生病住院，家人工作忙无法照顾，预约了住院陪护服务。护士不仅照顾我的生活起居，还能专业地观察病情变化，及时与医生沟通，让我住院期间倍感安心。',
    images: [],
    reply: ''
  }
]);

const qaList = ref([
  {
    question: '陪诊服务需要提前多久预约？',
    answer: '建议至少提前24小时预约陪诊服务，紧急情况可联系客服协调，我们会尽力安排。预约时请提供就诊医院、科室、时间等信息，以便我们安排合适的护士。',
    open: false
  },
  {
    question: '住院陪护服务包含哪些具体内容？',
    answer: '我们的住院陪护服务包括：生活照料（协助进食、个人卫生等）、专业护理（观察病情、测量生命体征、协助用药等）、医患沟通（与医生沟通病情、记录医嘱等）、情绪支持（陪伴交流、心理疏导）等。可根据患者需求定制服务内容。',
    open: false
  },
  {
    question: '远程医疗协助如何进行？',
    answer: '预约服务后，我们的护士会提前与您联系，了解您的需求和问题。在远程问诊前，护士会协助您准备好设备和相关资料，并帮助您整理需要咨询的问题。问诊过程中，护士会在旁协助沟通并记录医嘱。问诊结束后，会为您提供专业的解读和建议。',
    open: false
  }
]);

const goBack = () => {
  emit('go-back');
};

const selectServiceItem = (item) => {
  console.log('选择服务项目:', item.title);
  makeAppointment(item.title, parseInt(item.price.replace(/[^\d]/g, '')));
};

const toggleQA = (index) => {
  qaList.value[index].open = !qaList.value[index].open;
};

const makeAppointment = (serviceName, price) => {
  emit('show-appointment', {
    serviceName: serviceName || '就医陪诊服务',
    price: price || 199,
    source: 'medical-accompany'
  });
};
</script>

<style scoped>
.medical-accompany {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  max-width: 750px;
  margin: 0 auto;
  background-color: #f5f5f5;
  padding-bottom: 0;
  overflow-x: hidden;
  width: 100%;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  background-color: #00a163;
  color: white;
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
}

.back-button {
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header h1 {
  font-size: 18px;
  margin: 0;
  flex: 1;
  text-align: center;
}

.right-icons {
  display: flex;
  gap: 15px;
}

.icon {
  font-size: 20px;
  cursor: pointer;
}

.service-banner {
  background-color: white;
  padding: 15px;
}

.banner-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 15px;
}

.service-info h2 {
  font-size: 20px;
  margin: 0 0 10px 0;
}

.rating {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.stars {
  color: #ff9500;
  margin-right: 5px;
}

.rating-count {
  font-size: 14px;
  color: #666;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  padding: 4px 8px;
  background-color: #f0f9f6;
  color: #00a163;
  border-radius: 4px;
  font-size: 12px;
}

.service-tabs {
  display: flex;
  background-color: white;
  margin-top: 10px;
  border-bottom: 1px solid #f0f0f0;
  position: sticky;
  top: 50px;
  z-index: 99;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 15px 0;
  font-size: 14px;
  color: #666;
  position: relative;
  cursor: pointer;
}

.tab.active {
  color: #00a163;
  font-weight: bold;
}

.tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 3px;
  background-color: #00a163;
  border-radius: 3px;
}

.tab-content {
  background-color: white;
  padding: 15px;
}

.service-items {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.service-item {
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 15px;
  cursor: pointer;
}

.item-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.item-title {
  font-size: 16px;
  font-weight: bold;
}

.item-price {
  font-size: 16px;
  color: #ff4d4f;
  font-weight: bold;
}

.item-desc {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

.item-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.feature {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #666;
}

.feature-icon {
  color: #00a163;
  margin-right: 4px;
}

.service-process {
  margin-top: 20px;
}

.service-process h3 {
  font-size: 16px;
  margin-bottom: 15px;
}

.process-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.step-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #00a163;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 5px;
}

.step-text {
  font-size: 12px;
}

.step-arrow {
  color: #00a163;
}

.service-description {
  margin-top: 20px;
}

.service-description h3 {
  font-size: 16px;
  margin-bottom: 15px;
}

.description-content {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
}

.description-content h4 {
  font-size: 15px;
  margin: 15px 0 5px 0;
}

.description-content p {
  margin: 0 0 10px 0;
}

.service-notice {
  margin-top: 20px;
}

.service-notice h3 {
  font-size: 16px;
  margin-bottom: 15px;
}

.notice-item {
  margin-bottom: 15px;
}

.notice-item h4 {
  font-size: 15px;
  margin: 0 0 5px 0;
}

.notice-item p {
  font-size: 14px;
  color: #666;
  margin: 0 0 5px 0;
}

.reviews {
  padding-bottom: 20px;
}

.review-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.rating-large {
  font-size: 36px;
  font-weight: bold;
  color: #ff9500;
}

.stars-large {
  font-size: 24px;
  color: #ff9500;
  margin: 5px 0;
}

.review-count {
  font-size: 14px;
  color: #666;
}

.review-tags {
  display: flex;
  overflow-x: auto;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 10px;
}

.review-tag {
  padding: 6px 12px;
  background-color: #f5f5f5;
  border-radius: 20px;
  font-size: 12px;
  white-space: nowrap;
}

.review-tag.active {
  background-color: #e6f7f1;
  color: #00a163;
}

.review-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.review-item {
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.reviewer-info {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.reviewer-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
}

.reviewer-name {
  font-size: 14px;
  font-weight: bold;
  margin-right: 10px;
}

.review-date {
  font-size: 12px;
  color: #999;
}

.review-stars {
  font-size: 14px;
  color: #ff9500;
  margin-bottom: 10px;
}

.review-content {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 10px;
}

.review-images {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  overflow-x: auto;
  padding-bottom: 5px;
}

.review-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
}

.nurse-reply {
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 4px;
  font-size: 13px;
}

.reply-title {
  color: #00a163;
  margin-bottom: 5px;
}

.reply-content {
  font-size: 14px;
  color: #666;
}

.qa-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.qa-item {
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 15px;
}

.question {
  display: flex;
  align-items: flex-start;
  cursor: pointer;
}

.q-icon {
  width: 20px;
  height: 20px;
  background-color: #00a163;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  margin-right: 10px;
}

.q-text {
  flex: 1;
  font-size: 15px;
  font-weight: bold;
}

.q-arrow {
  font-size: 12px;
  color: #999;
  transition: transform 0.3s;
}

.arrow-down {
  transform: rotate(180deg);
}

.answer {
  display: flex;
  align-items: flex-start;
  margin-top: 10px;
  padding-left: 30px;
}

.a-icon {
  width: 20px;
  height: 20px;
  background-color: #ff9500;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  margin-right: 10px;
}

.a-text {
  flex: 1;
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

.booking-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  background-color: white;
  position: fixed;
  bottom: 60px;
  left: 0;
  right: 0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  max-width: 750px;
  margin: 0 auto;
  z-index: 99;
}

.price-info {
  display: flex;
  align-items: baseline;
}

.price {
  font-size: 24px;
  color: #ff4d4f;
  font-weight: bold;
}

.price-desc {
  font-size: 12px;
  color: #666;
  margin-left: 5px;
}

.book-button {
  padding: 10px 30px;
  background-color: #ff4d4f;
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 16px;
  cursor: pointer;
}

.bottom-placeholder {
  height: 120px;
  width: 100%;
}
</style> 